<template>
    <div class="weChatPay">
        <form id="myForm" method="get" @submit.prevent="aaa()">
            <header>
                <strong>待充值账号</strong>
                <input type="text" name="myAccount" class="myAccount" placeholder="请输入充值账号" />
            </header>
            <section>
                <strong>面额</strong>
                <nav class="selPrice clearfix">
                    <a href="javascript:;">
                        <span><em>880</em>金票</span>
                        <span>售价<em>88.00</em></span>
                    </a>
                    <a href="javascript:;">
                        <span><em>1980</em>金票</span>
                        <span>售价<em>198.00</em></span>
                    </a>
                    <a href="javascript:;">
                        <span><em>3000</em>金票</span>
                        <span>售价<em>300.00</em></span>
                    </a>
                    <a href="javascript:;">
                        <span><em>5000</em>金票</span>
                        <span>售价<em>500.00</em></span>
                    </a>
                    <a href="javascript:;">
                        <span><em>10000</em>金票</span>
                        <span>售价<em>1000.00</em></span>
                    </a>
                    <a href="javascript:;">
                        <span><em>30000</em>金票</span>
                        <span>售价<em>3000.00</em></span>
                    </a>
                    <a href="javascript:;">
                        <span><em>50000</em>金票</span>
                        <span>售价<em>5000.00</em></span>
                    </a>
                    <a href="javascript:;">
                        <span><em>100000</em>金票</span>
                        <span>售价<em>10000.00</em></span>
                    </a>
                    <a href="javascript:;">
                        <span><em>500000</em>金票</span>
                        <span>售价<em>50000.00</em></span>
                    </a>
                </nav>
            </section>
            <footer>
                <button class="immedRecharge">立即充值：<span>88.00</span>元</button>
            </footer>
        </form>
    </div>
</template>

<script>
    import wx from 'weixin-jsapi';

    export default {
        name: 'weChatPay',
        watch: {

        },
        created() {

        },
        mounted() {

        },
        data() {
            return {

            };
        },
        methods: {
            async aaa() {
                let res = await this.$axios.pay.weChatPayHandle({
                    params: {}
                });

                const {
                    responseData: {
                        appId,
                        nonceStr,
                        signature,
                        timestamp
                    }
                } = res.data;

                // console.log('appId', appId);
                // console.log('nonceStr', nonceStr);
                // console.log('signature', signature);
                // console.log('timestamp', timestamp);

                wx.config({
                    debug: true,
                    appId: appId,
                    timestamp: timestamp,
                    nonceStr: nonceStr,
                    signature: signature,
                    jsApiList: ['chooseWXPay']
                });

                wx.ready(res => {
                    wx.checkJsApi({
                        jsApiList: ['chooseWXPay'],
                        success: res => {
                            console.log('checked api:', res);
                        },
                        fail: err => {
                            console.log('check api fail:', err);
                        }
                    });
                });
            }
        },
        computed: {

        },
        components: {

        }
    };

</script>

<style lang="scss" scoped>
    form {
        padding: 0 24px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;

        header {
            strong {
                font-weight: normal;
                font-size: 24px;
                line-height: 60px;
                color: #666;
            }

            input {
                display: inline-block;
                width: 100%;
                height: 90px;
                font-weight: normal;
                font-size: 40px;
                color: #000;
                border: 0 none;
                border-bottom: 1px solid #dfdfdf;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                border-radius: 0;
            }
        }

        section {
            margin-top: 35px;

            strong {
                font-weight: normal;
                font-size: 24px;
                line-height: 70px;
                color: #666;
            }

            nav {
                a {
                    float: left;
                    width: 220px;
                    height: 114px;
                    border: 1px solid #81c2ff;
                    border-radius: 8px;
                    margin-right: 21px;
                    margin-bottom: 26px;
                    text-align: center;
                    font-weight: normal;
                    font-size: 30px;
                    line-height: 42px;
                    color: #000;
                    padding-top: 14px;

                    span {
                        display: block;

                        &:last-of-type {
                            font-size: 24px;
                            color: #999;
                        }
                    }

                    &:nth-of-type(3n) {
                        margin-right: 0;
                    }

                    &.active {
                        background-color: #408ce2;
                    }
                }

                .active {
                    span:first-of-type {
                        color: rgba(255, 255, 255, 1);
                    }

                    span:last-of-type {
                        color: rgba(255, 255, 255, .8);
                    }
                }
            }
        }

        footer {
            button {
                display: block;
                width: 688px;
                height: 90px;
                margin: 0 auto;
                font-weight: normal;
                font-size: 36px;
                line-height: 90px;
                color: #fff;
                text-align: center;
                background-color: #408ce2;
                border-radius: 6px;
                outline: none;
                cursor: pointer;
            }
        }
    }

    /** 使用webkit内核的浏览器 */
    ::-webkit-input-placeholder {
        color: #ccc;
    }

    /** Firefox版本4-18 */
    :-moz-placeholder {
        color: #ccc;
    }

    /** Firefox版本19+ */
    ::-moz-placeholder {
        color: #ccc;
    }

    /** IE浏览器 */
    :-ms-input-placeholder {
        color: #ccc;
    }

</style>
